<template>
	<div class="multi-element-modify-display">
		<!-- 用户输入显示 -->
		<div class="user-text-normal">
			{{ userRequest }}
		</div>
		<!-- 多元素容器卡片 -->
		<div class="multi-elements-container">
			<ElementChip 
				v-for="(element, index) in elements" 
				:key="index"
				:element="element"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import ElementChip from './ElementChip.vue'

// 定义元素信息接口
interface ElementInfo {
	selector: string
	textContent?: string
	originalElement?: string
}

// 定义组件属性
interface Props {
	userRequest: string
	elements: ElementInfo[]
}

// 接收属性
defineProps<Props>()
</script>

<style lang="scss" scoped>
.multi-element-modify-display {
	margin: 8px 0;
	
	.user-text-normal {
		margin-bottom: 8px;
		color: #262626;
		font-size: 14px;
		line-height: 1.5;
	}
	
	.multi-elements-container {
		max-height: 100px;
		overflow-y: auto;
		padding: 8px;
		border: 1px solid #e8e8e8;
		border-radius: 6px;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		gap: 4px;
		position: relative;
		transition: all 0.2s ease;
		
		&:hover {
			border-color: #d9d9d9;
			background: #f5f5f5;
		}
		
		/* 自定义滚动条样式 */
		&::-webkit-scrollbar {
			width: 4px;
		}
		
		&::-webkit-scrollbar-track {
			background: transparent;
		}
		
		&::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.2);
			border-radius: 2px;
			
			&:hover {
				background: rgba(0, 0, 0, 0.3);
			}
		}
	}
}
</style>